<template>
    <header class="app-header">
        <div class="container">
            <h1 class="logo">
                <RouterLink to="/"> </RouterLink>
            </h1>
            <img
                id="tzl_text"
                src="../assets/images/logo.jpg"
                alt="田中笠logo"
            />
            <!-- 导航栏 -->
            <HeaderNav />
            <div class="search">
                <el-input
                    :prefix-icon="Search"
                    type="text"
                    placeholder="输入后回车搜索"
                    size="small"
                    v-model.trim="searchItem"
                    @keyup.enter.native="onNext"
                    @focus="inputFocus"
                    style="width: 160px"
                    id="input"
                    ref="target"
                />
                <transition name="fade" mode="out-in">
                    <div class="history" v-show="showHistory">
                        <ul id="search-history">
                            <transition name="fade" mode="out-in">
                                <span
                                    v-show="!history.length"
                                    class="not-search"
                                    >暂无历史记录</span
                                >
                            </transition>
                            <li v-for="(item, index) in history" :key="item">
                                <span class="text" @click="clickLi(item)">{{
                                    item
                                }}</span>
                                <span
                                    class="del"
                                    @click.stop="
                                        useSearchStore.removeHistory(index)
                                    "
                                    ><el-icon><CloseBold /></el-icon
                                ></span>
                            </li>
                        </ul></div
                ></transition>
            </div>
            <div class="cart">
                <el-tooltip effect="light" content="购物车" placement="bottom">
                    <RouterLink class="curr" to="/cart">
                        <el-icon class="iconfont icon-cart"
                            ><ShoppingCartFull
                        /></el-icon>
                    </RouterLink>
                </el-tooltip>
            </div>
        </div>
    </header>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import HeaderNav from './header/header-nav.vue'
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { searchStore } from '@/stores/search'
const useSearchStore = searchStore()
let history = computed(() => useSearchStore.history)
let showHistory = ref(false)
const router = useRouter()
const searchItem = ref('')
const target = ref(null)
const onNext = () => {
    router.push({
        path: '/search',
        query: {
            goodsKeyWord: searchItem.value,
        },
    })
    showHistory.value = false
    searchItem.value = ''
    target.value.blur()
}
const inputFocus = () => {
    showHistory.value = true
}
const clickLi = item => {
    router.push({
        path: '/search',
        query: {
            goodsKeyWord: item,
        },
    })
    showHistory.value = false
    searchItem.value = ''
    target.value.blur()
}
onMounted(() => {
    let input = document.querySelector('.search')
    document.addEventListener('click', e => {
        if (input) {
            let isSelf = input.contains(e.target)
            if (!isSelf) {
                // 检测到点击元素外面
                showHistory.value = false
            }
        }
    })
})
onUnmounted(() => {
    let input = document.querySelector('.search')
    document.removeEventListener('click', e => {
        if (input) {
            let isSelf = input.contains(e.target)
            if (!isSelf) {
                // 检测到点击元素外面
                showHistory.value = false
            }
        }
    })
})
</script>

<style scoped lang="scss">
#tzl_text {
    width: 30px;
    margin-left: -10px;
}
.app-header {
    background: #fff;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .container {
        display: flex;
        align-items: center;
        height: 100%;
    }
    .logo {
        width: 200px;
        position: relative;
        left: -20px;
        a {
            display: block;
            height: 90px;
            width: 100%;
            text-indent: -9999px;
            background: url('https://img.tianzhongli.shop/i/2023/03/16/tzl_logo.webp')
                no-repeat center 22px / contain;
            transform: translateY(-10px);
        }
    }

    .search {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        --el-color-primary: #da9233;

        .not-search {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }
    }

    .cart {
        width: 50px;
        .curr {
            height: 23px;
            line-height: 32px;
            text-align: center;
            position: relative;
            display: block;
            .icon-cart {
                font-size: 22px;
            }
            em {
                font-style: normal;
                position: absolute;
                right: 0;
                top: 0;
                padding: 1px 4px;
                line-height: 1;
                background: red;
                color: #fff;
                font-size: 12px;
                border-radius: 10px;
                font-family: Arial;
            }
        }
    }
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    z-index: 999;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
#search-history {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    z-index: 999;
    width: 170px;
    height: 150px;
    position: absolute;
    left: -5px;
    border-radius: 5px;
    background-color: #fff;
    padding: 10px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.15);
    margin-top: 3px;
    li {
        width: 70px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 12px;
        margin-left: 5px;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.15);
        padding: 2px;
        border-radius: 3px;
        transition: all 0.3s ease;
        cursor: pointer;

        &:nth-child(1) {
            margin-left: 0;
        }
        &:hover {
            background-color: rgba(128, 128, 128, 0.202);
        }
        .text {
            max-width: 50px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .del {
            transition: all 0.3s ease;
            border-radius: 3px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 12px;
            margin-top: 2px;
            &:hover {
                background-color: rgba(54, 54, 54, 0.634);
                color: #d7c2a7;
            }
        }
    }
}
</style>
